<template>
  <div class="bottom-bar">
    <div class="orderDetail">
      <div class="top-bar">
        <div class="detail" v-bind:class="{'active':isDetail}" @click="openDetail">详情</div>
        <div class="modify" v-if="orderData.state!=1 && orderData.state!=2" v-bind:class="{'active':isUpdate}" @click="openUpdate">修改</div>
        <div class="pay" v-if="orderData.state==3" v-bind:class="{'active':isPay}" @click="openPay">支付</div>
        <div class="cancel" v-if="orderData.state!=1 && orderData.state!=2" @click="cancelOrder">取消订单</div>
        <div class="close-btn" @click="closeOrderDetail">X</div>
      </div>
      <div class="body-bar">
        <div class="detail-modify-page">
          <div class="container">
            <div class="left">
              <img :src="orderData.images" alt="">
            </div>
            <div class="right">
              <h2>{{ orderData.typeName }}</h2>
              <div>
                <span class="title">订单编号</span>
                <span class="des">{{ orderData.orderId }}</span>
              </div>
              <div>
                <span class="title">创建时间</span>
                <span class="des">{{ orderData.createTime }}</span>
              </div>
              <div>
                <span class="title">订单状态</span>
                <span class="des">{{ ["待核销","已核销","已取消","待支付","待分配"][orderData.state] }}</span>
              </div>
              <div>
                <span class="title">用户名</span>
                <span v-if="!isUpdate" class="des">{{ orderData.customerName }}</span>
                <input v-if="isUpdate" type="text" v-model="updateData.name">
              </div>
              <div>
                <span class="title">电话</span>
                <span v-if="!isUpdate" class="des">{{ orderData.customerPhone }}</span>
                <input v-if="isUpdate" type="text" v-model="updateData.phone">
              </div>
              <div>
                <span class="title">已分配房间</span>
                <span class="des" v-if="orderData.state==0">{{ orderData.roomId }}</span>
              </div>
              <div>
                <span class="title">订单价格</span>
                <span class="des">{{ orderData.totalPrice }}</span>
              </div>
              <div>
                <span class="title">入住时间</span>
                <span class="des">{{ orderData.inTime }}</span>
              </div>
              <div>
                <span class="title">退房时间</span>
                <span class="des">{{ orderData.outTime }}</span>
              </div>
              <div class="buttons-container">
                <button v-if="isUpdate" class="modify-accomplish" @click="commitUpdate">修改</button>
              </div>
            </div>
          </div>
        </div>
        <div class="pay-page" v-if="isPay">
          <div class="left">
            <h2>用户信息</h2>
            <div class="info-container">
              <div>
                <span class="title">账户</span>
                <span>{{ userName }}</span>
              </div>
              <div>
                <span class="title">余额</span>
                <span>{{ getUserBalance }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <h2>订单信息</h2>
            <div class="content-container">
              <div>
                <span class="title">价格</span>
                <span>{{ orderData.totalPrice }}</span>
              </div>
              <div>
                <span class="title">订单状态</span>
                <span>{{ ["待核销","已核销","已取消","待支付"][orderData.state] }}</span>
              </div>
              <div>
                <button @click="payOrder">支付</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "order-detail",
  props:["open"],
  data(){
    return {
      userName:"",
      orderData:{},
      updateData:{
        name:"",
        phone:""
      },
      isDetail:false,
      isUpdate:false,
      isPay:false,
    }
  },
  computed:{
    getUserBalance(){
      return this.$store.state[1].userBalance || window.sessionStorage.getItem('USERBALANCE') || '';
    }
  },
  mounted() {
    // 提供给父组件使用的触发显示接口。
    this.$bus.$on("openOrderDetail", ()=>{
      this.openOrderDetail();
    });
    this.$bus.$on("getOrderData", (data, userName)=>{
      this.orderData = data;
      this.updateData.name = data.customerName;
      this.updateData.phone = data.customerPhone;
      this.isUpdate = false;
      this.userName = userName;
    });
  },
  beforeDestroy() {
    this.$bus.$off("openOrderDetail");
    this.$bus.$off("getOrderData");
  },
  methods:{
    openOrderDetail(){
      // 用于激活页面，和初始化updateData
      let el = window.document.getElementsByClassName("bottom-bar")[0];
      el.style.display = "flex";
      this.isPay = false;
      this.isDetail = true;
    },
    // 关闭页面
    closeOrderDetail(){
      let el = window.document.getElementsByClassName("bottom-bar")[0];
      el.style.display = "none";
    },
    // 提交修改
    commitUpdate(){
      let data = {
        orderId:this.orderData.orderId,
        name:this.updateData.name,
        phone:this.updateData.phone
      };
      // --如果没有修改，就没有必要调用api
      if (data.name != this.orderData.customerName || data.phone != this.orderData.customerPhone){
        this.$store.dispatch("updateOrder", data);
        this.orderData.customerName = data.name;
        this.orderData.customerPhone = data.phone;
      }
      this.isUpdate=false;
      this.isDetail=true;
    },
    // 开启修改页。
    openUpdate(){
      this.isDetail = false;
      this.isUpdate = true;
      this.isPay = false;
    },
    // 开启详情页。
    openDetail(){
      this.isDetail = true;
      this.isUpdate = false;
      this.isPay = false;
    },
    // 开启支付页
    openPay(){
      this.isDetail = false;
      this.isUpdate = false;
      this.isPay = true;
    },
    // 支付订单
    payOrder(){
      this.$store.dispatch('userPayOrder', {orderId:this.orderData.orderId});
      this.closeOrderDetail();
    },
    // 取消订单
    cancelOrder(){
      this.$store.dispatch('userCancelOrder', {orderId:this.orderData.orderId});
      this.closeOrderDetail();
    }
  },

}
</script>

<style scoped lang="less">
.bottom-bar{
  min-width: 100vw;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;

  .orderDetail{
    width: 800px;
    height: 500px;
    background-color: #FFFFFF;
    position: relative;

    .top-bar{
      display: flex;
      justify-content: flex-start;

      .detail,.modify,.pay,.cancel{
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        user-select: none;
      }
      .active{
        background-color: #ffb508;
        color: white;
      }

      .close-btn{
        width: 80px;
        height: 30px;
        background-color: red;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        user-select: none;
      }
    }
    .body-bar{
      position: relative;

      .detail-modify-page,.pay-page{
        width: 100%;
        height: calc(500px - 30px);
        background-color: #ffb508;
      }
      .pay-page{
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;

        .left{
          width: 50%;
          border-right: solid 2px black;
          .info-container{
            text-align: center;
            margin: 50px auto;
            div{
              .title{
                width: 100px;
                margin-right: 20px;
              }
            }
          }
        }

        .right{
          width: 50%;

          .content-container{
            text-align: center;
            margin: 50px auto;
            div{
              .title{
                width: 100px;
                margin-right: 20px;
              }
              button{
                width: 80px;
                line-height: 30px;
                border: none;
                user-select: none;
                cursor: pointer;
              }
            }
          }
        }
      }

      .detail-modify-page{
        position: absolute;
        left: 0;
        top: 0;
        .container{
          width: 100%;
          height: 100%;
          padding: 20px;
          display: flex;
          justify-content: space-between;

          .left{
            width: 40%;
            height: 100%;
            text-align: center;
            img{
              width: 100%;
              height: 50%;
              background-color: blue;
              margin-bottom: 10px;
            }
          }
          .right{
            width: 60%;
            height: 100%;
            padding-left: 30px;
            border-left: 4px solid black;

            div{
              display: flex;
              justify-content: flex-start;

              .title {
                width: 30%;
                line-height: 30px;
                font-weight: bolder;
              }
              .des{
                width: 70%;
                line-height: 30px;
              }
              input{
                outline: none;
                border: none;
                padding: 5px;
                background-color: rgba(255,255,255,0.7);
                width: 70%;
              }
            }
            .buttons-container{
              width: 100%;
              display: flex;
              justify-content: flex-end;

              .modify-accomplish{
                width: 80px;
                height: 30px;
                border: none;
                user-select: none;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>